<template>
  <div class="foSi14" style="padding: 20px;">
    <div class="wid100 dis disAl disJuB">
      <div class="dis">
        <div class="mar-right10">
          <div class="foSi12" style="height: 20px;color: #787878;">课表</div>
          <div class="dis disAl hei40">
            <el-select v-model="surface" style="width: 140px" size="small" placeholder="请选择">
              <el-option
                v-for="(item,index) in surfaceList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div v-if="surface == 2" class="mar-right10">
          <div class="foSi12" style="height: 20px;color: #787878;">下周显示时间</div>
          <div class="dis disAl hei40">
            <el-select v-model="day" style="width: 80px;" class="sel">
              <el-option
                v-for="(item,index) in dayList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="hei60 dis disAl" style="padding-top: 20px;">
          <el-select v-if="surface == 2" v-model="shi" class="mar-right10 sel" style="width: 60px;">
            <el-option
              v-for="(item,index) in shiList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-if="surface == 2" v-model="fen" class="mar-right10 sel" style="width: 60px;">
            <el-option
              v-for="(item,index) in fenList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-popover popper-class="popo" placement="bottom" width="300" trigger="click">
            <div class="wid100">
              <div class="wid90 mar">
                <div class="foSi18">提示</div>
                <div class="foSi14 mar-top5">支持设置为仅显示本周课表，会员只能查看本周课表。设置下周课表显示时间，系统会自动在该时间点对会员展示下周课表。
                </div>
              </div>
            </div>
            <svg-icon slot="reference" icon-class="tishi" class="mar0 cuPo" style="width: 16px;height: 16px;" />
          </el-popover>
        </div>
      </div>
      <div class="dis disAl hei60" style="padding-top: 20px;">
        <div
          class="dis disAl hei34 borRad20 coFFF cuPo mar-right10"
          style="background: #6b7cdd;padding: 0 10px;"
          @click="clear()"
        >清空当前课表</div>
        <div
          class="dis disAl hei34 borRad20 coFFF cuPo mar-right10"
          style="background: #6b7cdd;padding: 0 10px;position: relative;"
          @click="copy"
        >复制当前课表到...
          <div
            v-if="copyshow"
            style="border: 1px solid #d9d9d9;position: absolute;left: 0;top: 40px;z-index: 10;width: 128px; color: #000;"
          >
            <div
              style="height: 32px;line-height: 32px;text-align: center;cursor: pointer;border-bottom: 1px solid #d9d9d9;"
              class="copy-item"
              @click.stop="copycen('xz')"
            >下周</div>
            <div
              style="height: 32px;line-height: 32px;text-align: center;cursor: pointer;border-bottom: 1px solid #d9d9d9;"
              class="copy-item"
              @click.stop="copycen('dy')"
            >当月</div>
            <div
              style="height: 32px;line-height: 32px;text-align: center;cursor: pointer;border-bottom: 0;"
              class="copy-item"
              @click.stop="copycen('xy')"
            >下月</div>
          </div>

        </div>

        <div
          class="dis disAl hei34 borRad20 coFFF cuPo mar-right10"
          style="background: #6b7cdd;padding: 0 10px;"
          @click="saveImg('surface')"
        >保存当前课表为图片</div>
        <div
          class="dis disAl hei34 borRad20 coFFF cuPo mar-right10"
          style="background: #6b7cdd;padding: 0 10px;"
          @click="saveExcel"
        >保存当前课表为Excel</div>
        <el-popover popper-class="popo" placement="bottom" width="300" trigger="click">
          <div class="wid100">
            <div class="wid90 mar">
              <div class="foSi18">提示</div>
              <div class="foSi14 mar-top5">点击复制课表到：可以复制当前日期的课表到下一周、当月、下个月</div>
            </div>
          </div>
          <svg-icon
            slot="reference"
            icon-class="tishi"
            class="mar0 cuPo"
            style="color: #6b7cdd;width: 16px;height: 16px;"
          />
        </el-popover>
      </div>
    </div>
    <div class="mar-top30 mar-bott25 dis disAl disJuB poRel">
      <div class="dis disAl">
        <div class="change-skin mar-right10" :class="skin === 1?'curr':''" effect="dark" title="切换课表样式">
          <span @click.stop="skinClick(0)" />
          <span @click.stop="skinClick(1)" />
        </div>
        <el-checkbox-group v-model="check" class="group1" @change="checkChange">
          <el-checkbox :label="1">显示课程难度</el-checkbox>
          <el-checkbox :label="2">显示团课</el-checkbox>
          <el-checkbox :label="3">显示精品课</el-checkbox>
          <el-checkbox :label="4">显示教室</el-checkbox>
          <el-checkbox :label="5">显示老师</el-checkbox>
          <el-checkbox :label="6">导出时显示日期</el-checkbox>
        </el-checkbox-group>
      </div>
      <div
        class="dis disAl hei34 borRad20 coFFF cuPo"
        style="background: #6b7cdd;padding: 0 24px;"
        @click.stop="timeChange(0)"
      >返回本周</div>
    </div>
    <div class="hei34 dis disAl disJuC mar-bott25">
      <svg-icon
        icon-class="arrow-left"
        class="mar0 cuPo"
        style="width: 29px;height: 29px;"
        @click.stop="timeChange(1)"
      />
      <div class="mar-left15 mar-right15 foSi18 xuanze">{{ oneTime.time }} 至 {{ sevenTime.time }}</div>
      <svg-icon
        icon-class="arrow-right"
        class="mar0 cuPo"
        style="width: 29px;height: 29px;"
        @click.stop="timeChange(2)"
      />
    </div>
    <div v-if="list" id="surface" class="wid100 xuanze">
      <table
        width="100%"
        class="syllabus-content-data"
        style="font-size:18px;"
        :class="skin === 1?'syllabus-content-data2':''"
      >
        <thead>
          <tr>
            <th width="66">
              <div>DAY</div>
            </th>
            <th v-for="(item, index) in timeList" :key="index">
              <div class="syllabus-thead-cell hei100">
                <div v-if="juDgeTrue('courseSurface_edit')" class="course-add">
                  <img v-if="todayTime > item.date" src="../../icons/png/syllaubs-dis-plus.png" class="wh100">
                  <div v-else class="wh100 cuPo" title="点击添加排课" @click.stop="surfaceAdd(item)">
                    <img src="../../icons/png/syllaubs-plus.png" class="wh100 ">
                  </div>
                </div>
                <div class="foSi17 fowe800 hei20 dis disAl">{{ item.name }}</div>
                <div style="color: #4f4f4f;">{{ item.time }}</div>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td class="time-group-text-box">
              <div class="time-group-text textCen fowe800">{{ item.time[0] }}</div>
            </td>
            <td
              v-for="(item1,index1) in item.course"
              :key="index1"
              :style="skin === 1?'background: #'+item1.colors+';color: #fff;':''"
            >
              <div class="syllabus-list-course">
                <div v-if="item1.status == 2" class="stop-ribbon">停 课</div>
                <div v-if="item1.status == 3" class="stop-ribbon">取 消</div>
                <div
                  v-if="JSON.stringify(item1) !== '[]'"
                  class="active"
                  @click.stop="editClick(item1,index1)"
                >
                  <div
                    v-if="skin !== 1"
                    class="course-color"
                    :style="'background: #'+item1.colors+';'"
                  >
                    <span class="arrow" />
                  </div>
                  <span v-if="item1.schedule_type === '4'" class="quality-badge" />
                  <span v-if="item1.is_stop === '1'" class="stop-ribbon">已停课</span>
                  <p class="mp0 ">{{ item1.start_time }}~{{ item1.end_time }}</p>
                  <p class="mp0 webkitLineClamp2">{{ item1.name }}</p>
                  <p v-if="check.indexOf(5) !== -1" class="mp0 ">{{ item1.coach_name }}</p>
                  <p v-if="check.indexOf(4) !== -1" class="mp0 ">{{ item1.classroom }}</p>
                  <p v-if="check.indexOf(1) !== -1" class="mp0 ">
                    <svg-icon
                      v-for="(item2,index2) in 5"
                      :key="index2"
                      :icon-class="index2+1 <= Number(item1.dif_star)?'s_xing':'k_xing'"
                      class="mar0 cuPo"
                      :style="skin === 1?'fill: #fff;':''"
                      style="width: 14px;height: 14px;"
                    />
                  </p>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="time-group-text-box" />
            <td class="time-group-text-box" />
            <td class="time-group-text-box" />
            <td class="time-group-text-box" />
            <td class="time-group-text-box" />
            <td class="time-group-text-box" />
            <td class="time-group-text-box" />
            <td class="time-group-text-box" style="width: 152px;">
              <vue-qr :logo-src="imageUrl" :text="'https://www.jianyigongxiang.com/h5/' + aid + '.html#/pages/course/tableCourse'" :size="152" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="wid100 dis mar-top30" style="height: 120px;">
      <div style="width: 680px;">
        <div class="hei44 dis disAl" style="padding: 0 15px;background: #f2f2f2;">
          维护课表标题及备注(保存课表时标题和备注会一并显示在课程表图片中) </div>
        <div class="hei44 dis disAl disJuB mar-top10" style="padding: 0 15px;background: #f2f2f2;">
          <div class="dis disAl">
            <div>标题</div>
            <div style="width: 480px;color: #787878;margin: 0 8px 0 52px;">请输入课表标题(如:xx瑜伽馆xx月课表)</div>
          </div>
          <div class="dis disAl">
            <svg-icon
              icon-class="form"
              class="mar0 cuPo mar-right5"
              style="width: 16px;height: 16px;fill: #999fa4;"
            />
            <div>编辑</div>
          </div>
        </div>
        <div class="hei44 dis disAl disJuB mar-top10" style="padding: 0 15px;background: #f2f2f2;">
          <div class="dis disAl">
            <div>备注</div>
            <div style="width: 480px;color: #787878;margin: 0 8px 0 52px;">请输入备注(如:黄色课程适合初学者习练..)</div>
          </div>
          <div class="dis disAl">
            <svg-icon
              icon-class="form"
              class="mar0 cuPo mar-right5"
              style="width: 16px;height: 16px;fill: #999fa4;"
            />
            <div>编辑</div>
          </div>
        </div>
      </div>
      <!--			<div class="dis disAl mar-left25">-->
      <!--				<div style="position: absolute; right: 20px; bottom:0; background: #f4f4f7;width: 152px;height: 152px;padding: 12px;">-->
      <!--					<img src="https://img.keepyoga.com/h5_qr_code/tmp/h5qrcode/20240809143042373795.png" class="wh100">-->
      <!--				</div>-->
      <!--				<div class="mar-left10 poRel" style="height: 152px;">-->
      <!--					<div class="poAbs" style="bottom: 0;">-->
      <!--						<div class="dis disAl disJuC hei34 borRad20 coFFF cuPo"-->
      <!--							style="background: #6b7cdd;width: 106px;">设置二维码</div>-->
      <!--						<div class="dis disAl disJuC hei34 borRad20 coFFF cuPo mar-top10"-->
      <!--							style="background: #6b7cdd;width: 106px;">下载二维码</div>-->
      <!--					</div>-->
      <!--				</div>-->
      <!--			</div>-->
    </div>
    <div v-if="addVisible || editVisible" class="zhezhao wh100" />
    <div v-if="addVisible" class="zhezhaoN dis disAl disJuC wh100">
      <el-scrollbar wrap-class="scrollbar-wrapper poRel borRad10 bacFFF zhezhaoWH" style="width: 962px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
            <div class="dis disAl">
              <div class="foSi20 fowe600 mar-right10">新增团课排课（{{ addTime.dateName }} {{ addTime.name }}）</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="shuaVisibleClick()"
            />
          </div>
          <div class="mar-top20">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>课程类型</span>
                  </div>
                  <el-form-item class="mp0" prop="type">
                    <el-select
                      v-model="ruleForm.type"
                      style="width: 140px"
                      placeholder="请选择"
                      @change="getCourse"
                    >
                      <el-option
                        v-for="(item,index) in typeList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div
                  class="hei100 item-p item-w dis disAl disJuB"
                  style="border-right: 2px solid #f2f2f2;"
                >
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>课程</span>
                  </div>
                  <el-form-item class="mp0" prop="courses">
                    <el-select
                      v-model="ruleForm.courses"
                      style="width: 140px"
                      filterable
                      placeholder="请选择"
                      @change="coursesChange"
                    >
                      <el-option
                        v-for="(item,index) in coursesList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </div>
                <span
                  class="cuPo"
                  style="color: #6b7cdd;"
                  @click.stop="tiaozhuan('/course/courseAdd?type=1')"
                >还没课程？马上去添加课程</span>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>老师</span>
                  </div>
                  <el-form-item class="mp0" prop="coachs">
                    <el-select v-model="ruleForm.coachs" style="width: 140px" placeholder="请选择">
                      <el-option
                        v-for="(item,index) in coachsList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div>老师课时费（元/节）</div>
                  <div>{{ ruleForm.fee }}</div>
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>课程时长</span>
                  </div>
                  <el-form-item class="mp0" prop="kcTime">
                    <el-input
                      v-model="ruleForm.kcTime"
                      style="width: 140px;"
                      placeholder="请输入课程时长"
                      @change="jisuanTime"
                    />
                  </el-form-item>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div class="dis disAl">
                    <span class="mar-right5" style="color: #FF0000;">*</span>
                    <span>容纳人数（人）</span>
                  </div>
                  <el-form-item class="mp0" prop="galleryful">
                    <el-input
                      v-model="ruleForm.galleryful"
                      style="width: 140px;"
                      placeholder="请填写人数"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div>上课教室</div>
                  <el-select
                    v-model="ruleForm.classrooms"
                    style="width: 140px"
                    placeholder="请选择"
                    @change="ruleForm.relevance = []"
                  >
                    <el-option
                      v-for="(item,index) in classroomsList"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div>
                    <span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
                    <span>开始时间</span>
                  </div>
                  <div class="dis disAl">
                    <div v-if="ruleForm.jieshuTime" class="mar-right5">结束时间:
                      {{ ruleForm.jieshuTime }}
                    </div>
                    <el-select
                      v-model="ruleForm.shiTime"
                      style="width: 70px;height: 34px;"
                      @change="shiCheange"
                    >
                      <el-option
                        v-for="(item,index) in shiList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <span class="mar-left10 mar-left10">：</span>
                    <el-select
                      v-model="ruleForm.fenTime"
                      style="width: 70px;height: 34px;"
                      @change="shiCheange"
                    >
                      <el-option
                        v-for="(item,index) in fenList1"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
              </div>
              <div v-if="ruleForm.classrooms" class="wid100 item-l mar-bott10 dis item-p">
                <div class="mar-top10" style="width: 248px;">关联教室</div>
                <el-checkbox-group v-model="ruleForm.relevance" class="mar-bott10">
                  <el-checkbox
                    v-for="(item,index) in classroomsList"
                    v-if="ruleForm.classrooms !== item.id"
                    :key="index"
                    :label="item.id"
                    class="mar-top10 mar-right30"
                  >{{ item.name }}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="wid100 hei44 dis disAl item-l mar-bott10">
                <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                  <div class="dis disAl">颜色</div>
                  <el-popover
                    v-model="isPopover"
                    popper-class="monitor-yt-popover1"
                    placement="bottom"
                    width="220"
                    trigger="click"
                  >
                    <div class="wid100">
                      <div
                        class="coFFF dis disAl"
                        style="background: #84878d;height: 24px;padding-left: 10px;"
                      >选颜色</div>
                      <div class="wid100 dis disAl flwa" style="padding: 11px 5px 5px 11px;">
                        <div
                          v-for="(item,index) in colorList"
                          :key="index"
                          class="col cuPo"
                          :style="'background: #'+item+';'"
                          @click.stop="ruleForm.color = item,isPopover = false"
                        />
                      </div>
                    </div>
                    <div
                      slot="reference"
                      class="dis disAl hei34 bacFFF cuPo"
                      style="border: 1px solid #d9d9d9;"
                    >
                      <span style="width: 10px;" />
                      <span
                        style="width: 88px;height: 20px;"
                        :style="'background: #'+ruleForm.color+';'"
                      />
                      <div class="dis disJuC" style="width: 40px;">
                        <i class="el-icon-arrow-down" />
                      </div>
                    </div>
                  </el-popover>
                </div>
                <div class="hei100 item-p item-w dis disAl disJuB">
                  <div class="dis disAl">课程难度</div>
                  <div class="dis disAl">
                    <svg-icon
                      v-for="(item,index) in 5"
                      :key="index"
                      :icon-class="index+1 <= Number(ruleForm.difficulty)?'s_xing':'k_xing'"
                      class="mar0 cuPo"
                      style="width: 20px;height: 20px;fill: #f5934b;"
                      @click.stop="ruleForm.difficulty = (index+1)"
                    />
                  </div>
                </div>
              </div>
              <div class="foSi12 titl mar-top10">开课人数限制</div>
              <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                <div class="hei44 dis disAl item-l item-p">
                  <div class="label">遵从课程</div>
                  <div class="dis disAl">
                    <div class="dis disAl cuPo" @click.stop="ruleForm.enrollment = 1">
                      <div
                        class="dis disAl disJuC bacFFF borRad50"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      >
                        <div
                          v-if="ruleForm.enrollment === 1"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5">遵从系统规则</div>
                    </div>
                    <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm.enrollment = 2">
                      <div
                        class="dis disAl disJuC bacFFF borRad50"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      >
                        <div
                          v-if="ruleForm.enrollment === 2"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5">单独设置</div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-if="ruleForm.enrollment === 2"
                class="wid100 item-l item-p hei44 mar-bott10 dis disAl"
              >
                <div class="dis disAl cuPo" @click.stop="ruleForm.restrict = 1">
                  <div
                    class="dis disAl disJuC bacFFF borRad50"
                    style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  >
                    <div
                      v-if="ruleForm.restrict === 1"
                      class="borRad50"
                      style="width: 6px;height: 6px;background: #6b7cdd;"
                    />
                  </div>
                  <div class="mar-left5">不限制</div>
                </div>
                <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm.restrict = 2">
                  <div
                    class="dis disAl disJuC bacFFF borRad50"
                    style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                  >
                    <div
                      v-if="ruleForm.restrict === 2"
                      class="borRad50"
                      style="width: 6px;height: 6px;background: #6b7cdd;"
                    />
                  </div>
                  <div class="mar-left5 mar-right15">限制，满</div>
                  <el-form-item prop="restrictPeople" class="mp0">
                    <el-input v-model="ruleForm.restrictPeople" class="cen" style="width: 80px;" />
                  </el-form-item>
                  <div class="mar-left5 mar-right15"> 人开课，人数不足提前</div>
                  <el-form-item prop="restrictTime" class="mp0">
                    <el-input v-model="ruleForm.restrictTime" class="cen" style="width: 80px;" />
                  </el-form-item>
                  <div class="mar-left5">分钟自动取消</div>
                </div>
              </div>
              <div class="foSi12 titl">预约时间设置</div>
              <div class="hei44 dis disAl item-l item-p mar-bott10">
                <div class="label">遵从课程</div>
                <div class="dis disAl">
                  <div class="dis disAl cuPo" @click.stop="curriculumFollowClick(1)">
                    <div
                      class="dis disAl disJuC bacFFF borRad50"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                    >
                      <div
                        v-if="ruleForm.curriculumFollow === 1"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5">遵从课程预约规则</div>
                  </div>
                  <div class="dis disAl cuPo mar-left30" @click.stop="curriculumFollowClick(2)">
                    <div
                      class="dis disAl disJuC bacFFF borRad50"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                    >
                      <div
                        v-if="ruleForm.curriculumFollow === 2"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5">单独设置</div>
                  </div>
                </div>
              </div>
              <div
                v-if="ruleForm.curriculumFollow === 2"
                class="hei44 dis disAl item-l item-p mar-bott10"
              >
                <div class="label">预约方式</div>
                <div class="dis disAl">
                  <div class="dis disAl cuPo" @click.stop="ruleForm.mode = 1">
                    <div
                      class="dis disAl disJuC bacFFF borRad50"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                    >
                      <div
                        v-if="ruleForm.mode === 1"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5">不支持会员自主预约</div>
                  </div>
                  <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm.mode = 2">
                    <div
                      class="dis disAl disJuC bacFFF borRad50"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                    >
                      <div
                        v-if="ruleForm.mode === 2"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5">单自主预约，不限制预约时间 </div>
                  </div>
                  <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm.mode = 3">
                    <div
                      class="dis disAl disJuC bacFFF borRad50"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                    >
                      <div
                        v-if="ruleForm.mode === 3"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5">自主预约，限制预约时间</div>
                  </div>
                </div>
              </div>
              <div
                v-if="ruleForm.curriculumFollow === 2 && ruleForm.mode === 3"
                class="dis item-l mar-bott10"
                style="padding: 5px 15px;"
              >
                <div class="label">预约时间</div>
                <div>
                  <div class="dis disAl mar-bott10">
                    <div
                      class="dis disAl disJuC bacFFF borRad50 cuPo"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      @click.stop="ruleForm.time = 1"
                    >
                      <div
                        v-if="ruleForm.time === 1"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5 mar-right15">提前</div>
                    <el-form-item prop="fenTime" class="mp0">
                      <el-input
                        v-model="ruleForm.astrict1"
                        class="cen"
                        style="width: 80px;"
                        placeholder="不限制"
                      />
                    </el-form-item>
                    <div class="mar-left10 mar-right5">天，</div>
                    <el-select v-model="ruleForm.startShi" class="sel" style="width: 60px;">
                      <el-option
                        v-for="(item,index) in shiList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <div class="mar-left5 mar-right5">:</div>
                    <el-select v-model="ruleForm.startFen" class="sel" style="width: 60px;">
                      <el-option
                        v-for="(item,index) in fenList1"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <div class="mar-left10 mar-right10">至</div>
                    <el-select v-model="ruleForm.endShi" class="sel" style="width: 60px;">
                      <el-option
                        v-for="(item,index) in shiList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <div class="mar-left5 mar-right5">:</div>
                    <el-select v-model="ruleForm.endFen" class="sel" style="width: 60px;">
                      <el-option
                        v-for="(item,index) in fenList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <div class="mar-left5">接受自主预约</div>
                  </div>
                  <div class="dis disAl mar-bott10">
                    <div
                      class="dis disAl disJuC bacFFF borRad50 cuPo"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      @click.stop="ruleForm.time = 2"
                    >
                      <div
                        v-if="ruleForm.time === 2"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5 mar-right15">提前</div>
                    <el-form-item prop="astrict2" class="mp0">
                      <el-input
                        v-model="ruleForm.astrict2"
                        class="cen"
                        style="width: 80px;"
                        placeholder="不限制"
                      />
                    </el-form-item>
                    <div class="mar-left10 mar-right5">天，</div>
                    <el-select v-model="ruleForm.startShi1" class="sel" style="width: 60px;">
                      <el-option
                        v-for="(item,index) in shiList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <div class="mar-left5 mar-right5">:</div>
                    <el-select v-model="ruleForm.startFen1" class="sel" style="width: 60px;">
                      <el-option
                        v-for="(item,index) in fenList1"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <div class="mar-left5">接受自主预约</div>
                  </div>
                  <div class="dis disAl">
                    <div
                      class="dis disAl disJuC bacFFF borRad50 cuPo"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      @click.stop="ruleForm.time = 3"
                    >
                      <div
                        v-if="ruleForm.time === 3"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5 mar-right15">开课前</div>
                    <el-form-item prop="fenTime1" class="mp0">
                      <el-input
                        v-model="ruleForm.fenTime1"
                        class="cen"
                        style="width: 80px;"
                        placeholder="0"
                      />
                    </el-form-item>
                    <div class="mar-left5">分钟接受自主预约</div>
                  </div>
                </div>
              </div>
              <div
                v-if="ruleForm.curriculumFollow === 2 && ruleForm.mode >= 2"
                class="dis disAl hei44 item-l item-p mar-bott30"
              >
                <div class="label">预约截止时间</div>
                <div class="dis disAl">
                  <div class="mar-right15">课程预约人数未满，会员需早于开课前</div>
                  <el-form-item prop="fenTime2" class="mp0">
                    <el-input
                      v-model="ruleForm.fenTime2"
                      class="cen"
                      style="width: 80px;"
                      placeholder="0"
                    />
                  </el-form-item>
                  <div class="mar-left5">分钟接受自主预约</div>
                </div>
              </div>
              <div v-if="ruleForm.type && !ruleForm.fee" class="dialog-tips" style="margin-top: 10px;">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #f5934b;width: 16px;height: 16px;"
                />
                <span class="mar-left10">当前选择的老师没有配置过课时费信息，可进入“课程管理－课时费配置”页面统一配置</span>
              </div>
            </el-form>
          </div>
          <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
            <div
              class="mar-right20 que cuPo"
              style="background: #6b7cdd;"
              @click.stop="submitForm('ruleForm')"
            >保存</div>
            <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div v-if="editVisible" class="zhezhaoN dis disAl disJuC wh100">
      <el-scrollbar wrap-class="scrollbar-wrapper poRel borRad10 bacFFF zhezhaoWH" style="width: 962px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
            <div class="dis disAl">
              <div class="foSi20 fowe600 mar-right10">课程信息（{{ editName.dateName }} {{ editDay }}）</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="editVisible = false"
            />
          </div>
          <div v-if="edit === 1">
            <div class="foSi12 titl mar-top20">课程基本信息</div>
            <div class="wid100 item-l hei44 mar-bott10 dis disAl">
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>名称</div>
                <div>{{ editData.name }}</div>
              </div>
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>课程时长（分钟）</div>
                <div>{{ editData.long_time }}</div>
              </div>
            </div>
            <div class="wid100 item-l hei44 mar-bott10 dis disAl">
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>老师</div>
                <div>{{ editData.coach_name }}</div>
              </div>
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>老师课时费（元/节）</div>
                <div>{{ editData.hour_subsidy }}</div>
              </div>
            </div>
            <div class="wid100 item-l hei44 mar-bott10 dis disAl">
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>课程类型</div>
                <div>{{ editData.type_name }}</div>
              </div>
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>容纳人数（人）</div>
                <div>{{ editData.people_num }}</div>
              </div>
            </div>
            <div class="wid100 item-l hei44 mar-bott10 dis disAl">
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>颜色</div>
                <span
                  style="width: 88px;height: 20px;"
                  :style="'background: #'+editData.colors+';'"
                />
              </div>
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>课程难度</div>
                <div class="dis disAl">
                  <svg-icon
                    v-for="(item,index) in 5"
                    :key="index"
                    :icon-class="index+1 <= editData.dif_star?'s_xing':'k_xing'"
                    class="mar0 cuPo"
                    style="width: 20px;height: 20px;fill: #f5934b;"
                  />
                </div>
              </div>
            </div>
            <div class="wid100 item-l mar-bott10" style="padding: 5px 15px;">
              <div>简介</div>
              <div id="richId1" class="syllabus-introduce" />
            </div>
            <div class="foSi12 titl mar-top20">排课信息</div>
            <div class="wid100 item-l hei44 mar-bott10 dis disAl">
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>上课教室</div>
                <div>{{ editData.classroom_name }}</div>
              </div>
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>上课时间</div>
                <div>{{ editData.class_hour+':'+editData.class_min }}</div>
              </div>
            </div>
            <div class="wid100 item-l hei44 mar-bott10 dis disAl">
              <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                <div>预约时间</div>
                <div>{{ editData.yytime }}</div>
              </div>
            </div>
            <div class="foSi12 titl mar-top20">开课人数限制</div>
            <div class="wid100 item-l item-p hei44 mar-bott10 dis disAl">
              {{ editData.people_setting === 1?'遵从系统规则':'限制，满'+editData.starts_people+'人开课，人数不足提前'+editData.before_cancel+'分钟自动取消' }}
            </div>
            <div
              v-if="gouTime(editData.class_time)"
              class="wid100 dis disAl disJuC foSi14 coFFF"
              style="padding: 20px 0 40px"
            >
              <div class="mar-right20 que cuPo" style="background: #AEAEAE;">停课</div>
              <div class="mar-right20 que cuPo" style="background: #AEAEAE;">编辑</div>
              <div class="mar-right20 que cuPo" style="background: #AEAEAE;">删除</div>
            </div>
            <div v-else class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
              <div v-if="juDgeTrue('courseSurface_edit')">
                <div v-if="editData.status === 1" class="mar-right20 que cuPo" style="background: #6b7cdd;" @click.stop="tfCourse(2)">停课</div>
                <div v-else class="mar-right20 que cuPo" style="background: #6b7cdd;" @click.stop="tfCourse(1)">复课</div>
              </div>
              <div v-if="juDgeTrue('courseSurface_edit')" class="mar-right20 que cuPo" style="background: #6b7cdd;" @click.stop="editTwo()">编辑
              </div>
              <div v-if="juDgeTrue('courseSurface_edit')" class="mar-right20 que cuPo" style="background: #e84577;" @click.stop="getDdel()">删除</div>
              <!-- <el-popover popper-class="bot" placement="bottom" width="260" trigger="click">
								<div class="wid100 bacFFF foSi14" styel="border: 1px solid #d9d9d9;">
									<div class="del-list textCen" style="border-bottom: 1px solid #d9d9d9;"
										@click.stop="editVisible = false">仅删除本次课程</div>
									<div class="del-list textCen" @click.stop="editVisible = false">删除本次及以后每周六的这节课</div>
								</div>
								<div slot="reference" class="que cuPo" style="background: #6b7cdd;">删除</div>
							</el-popover> -->
            </div>
          </div>
          <div v-if="edit === 2">
            <div class="mar-top20">
              <el-form ref="ruleForm1" :model="ruleForm1" :rules="rules1">
                <div class="foSi12 titl">课程基本信息</div>
                <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                  <div
                    class="hei100 item-bor item-p item-w dis disAl disJuB"
                    style="border-right: 2px solid #f2f2f2;"
                  >
                    <div class="dis disAl">
                      <span class="mar-right5" style="color: #FF0000;">*</span>
                      <span>课程名称</span>
                    </div>
                    <el-form-item class="mp0" prop="courses">
                      <el-select
                        v-model="ruleForm1.courses"
                        style="width: 140px"
                        filterable
                        placeholder="请选择"
                        @change="coursesChange1"
                      >
                        <el-option
                          v-for="(item,index) in coursesList1"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="hei100 item-p item-w dis disAl disJuB">
                    <div class="dis disAl">
                      <span class="mar-right5" style="color: #FF0000;">*</span>
                      <span>课程时长</span>
                    </div>
                    <el-form-item class="mp0" prop="kcTime">
                      <el-input
                        v-model="ruleForm1.kcTime"
                        style="width: 140px;"
                        placeholder="请输入课程时长"
                      />
                    </el-form-item>
                  </div>
                </div>
                <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                  <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                    <div class="dis disAl">
                      <span class="mar-right5" style="color: #FF0000;">*</span>
                      <span>老师</span>
                    </div>
                    <el-form-item class="mp0" prop="coachs">
                      <el-select
                        v-model="ruleForm1.coachs"
                        style="width: 140px"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item,index) in coachsList"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="hei100 item-p item-w dis disAl disJuB">
                    <div>老师课时费（元/节）</div>
                    <div>{{ ruleForm1.fee }}</div>
                  </div>
                </div>
                <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                  <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                    <div>课程类型</div>
                    <div>{{ editData.type_name }}</div>
                  </div>
                  <div class="hei100 item-p item-w dis disAl disJuB">
                    <div>课程难度</div>
                    <div class="dis disAl">
                      <svg-icon
                        v-for="(item,index) in 5"
                        :key="index"
                        :icon-class="index+1 <= Number(ruleForm1.difficulty)?'s_xing':'k_xing'"
                        class="mar0 cuPo"
                        style="width: 20px;height: 20px;fill: #f5934b"
                        @click.stop="ruleForm1.difficulty = (index+1)"
                      />
                    </div>
                  </div>
                </div>
                <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                  <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                    <div class="dis disAl">
                      <span class="mar-right5" style="color: #FF0000;">*</span>
                      <span>容纳人数（人）</span>
                    </div>
                    <el-form-item class="mp0" prop="galleryful">
                      <el-input
                        v-model="ruleForm1.galleryful"
                        style="width: 140px;"
                        placeholder="请填写人数"
                      />
                    </el-form-item>
                  </div>
                  <div class="hei100 item-p item-w dis disAl disJuB">
                    <div class="dis disAl">颜色</div>
                    <el-popover
                      v-model="isPopover1"
                      popper-class="monitor-yt-popover1"
                      placement="bottom"
                      width="220"
                      trigger="click"
                    >
                      <div class="wid100">
                        <div
                          class="coFFF dis disAl"
                          style="background: #84878d;height: 24px;padding-left: 10px;"
                        >选颜色
                        </div>
                        <div class="wid100 dis disAl flwa" style="padding: 11px 5px 5px 11px;">
                          <div
                            v-for="(item,index) in colorList"
                            :key="index"
                            class="col cuPo"
                            :style="'background: #'+item+';'"
                            @click.stop="ruleForm1.color = item,isPopover1 = false"
                          />
                        </div>
                      </div>
                      <div
                        slot="reference"
                        class="dis disAl hei34 bacFFF cuPo"
                        style="border: 1px solid #d9d9d9;"
                      >
                        <span style="width: 10px;" />
                        <span
                          style="width: 88px;height: 20px;"
                          :style="'background: #'+ruleForm1.color+';'"
                        />
                        <div class="dis disJuC" style="width: 40px;">
                          <i class="el-icon-arrow-down" />
                        </div>
                      </div>
                    </el-popover>
                  </div>
                </div>
                <div class="wid100 dis item-l mar-bott10" style="padding: 5px 15px;">
                  <div class="dis mar-right20" style="padding-top: 10px;">简介</div>
                  <div class="class-desc">
                    <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-success="handleAvatarSuccess1"
                      :before-upload="beforeAvatarUpload"
                    >
                      <div class="rich-insert	">
                        <svg-icon
                          icon-class="up-editior"
                          class="mar0 cuPo"
                          style="width: 25px;height: 25px;"
                        />
                        <span class="mar-left10">插入图片</span>
                      </div>
                    </el-upload>
                    <div
                      id="richId"
                      class="rich-row"
                      contenteditable="true"
                      @click="handleSelection"
                      @input="handleSelection"
                    />
                  </div>
                </div>
                <div class="foSi12 titl mar-top20">排课信息</div>
                <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                  <div class="hei100 item-bor item-p item-w dis disAl disJuB">
                    <div>上课教室</div>
                    <el-select
                      v-model="ruleForm1.classrooms"
                      style="width: 140px"
                      placeholder="请选择"
                      @change="ruleForm1.relevance = []"
                    >
                      <el-option
                        v-for="(item,index) in classroomsList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </div>
                  <div class="hei100 item-p item-w dis disAl disJuB">
                    <div>
                      <span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
                      <span>上课时间</span>
                    </div>
                    <div class="dis disAl">
                      <el-select v-model="ruleForm1.shiTime" style="width: 70px;height: 34px;">
                        <el-option
                          v-for="(item,index) in shiList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <span class="mar-left10 mar-left10">：</span>
                      <el-select v-model="ruleForm1.fenTime" style="width: 70px;height: 34px;">
                        <el-option
                          v-for="(item,index) in fenList1"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                  </div>
                </div>
                <div v-if="ruleForm1.classrooms" class="wid100 item-l mar-bott10 dis item-p">
                  <div class="mar-top10" style="width: 248px;">关联教室</div>
                  <el-checkbox-group v-model="ruleForm1.relevance" class="mar-bott10">
                    <el-checkbox
                      v-for="(item,index) in classroomsList"
                      v-if="ruleForm1.classrooms !== item.id"
                      :key="index"
                      :label="item.id"
                      class="mar-top10 mar-right30"
                    >{{ item.name }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="foSi12 titl mar-top10">开课人数限制</div>
                <div class="wid100 item-l hei44 mar-bott10 dis disAl">
                  <div class="hei44 dis disAl item-l item-p">
                    <div class="label">遵从课程</div>
                    <div class="dis disAl">
                      <div class="dis disAl cuPo" @click.stop="ruleForm1.enrollment = 1">
                        <div
                          class="dis disAl disJuC bacFFF borRad50"
                          style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                        >
                          <div
                            v-if="ruleForm1.enrollment === 1"
                            class="borRad50"
                            style="width: 6px;height: 6px;background: #6b7cdd;"
                          />
                        </div>
                        <div class="mar-left5">遵从系统规则</div>
                      </div>
                      <div
                        class="dis disAl cuPo mar-left30"
                        @click.stop="ruleForm1.enrollment = 2"
                      >
                        <div
                          class="dis disAl disJuC bacFFF borRad50"
                          style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                        >
                          <div
                            v-if="ruleForm1.enrollment === 2"
                            class="borRad50"
                            style="width: 6px;height: 6px;background: #6b7cdd;"
                          />
                        </div>
                        <div class="mar-left5">单独设置</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="ruleForm1.enrollment === 2"
                  class="wid100 item-l item-p hei44 mar-bott10 dis disAl"
                >
                  <div class="dis disAl cuPo" @click.stop="ruleForm1.restrict = 1">
                    <div
                      class="dis disAl disJuC bacFFF borRad50"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                    >
                      <div
                        v-if="ruleForm1.restrict === 1"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5">不限制</div>
                  </div>
                  <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.restrict = 2">
                    <div
                      class="dis disAl disJuC bacFFF borRad50"
                      style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                    >
                      <div
                        v-if="ruleForm1.restrict === 2"
                        class="borRad50"
                        style="width: 6px;height: 6px;background: #6b7cdd;"
                      />
                    </div>
                    <div class="mar-left5 mar-right15">限制，满</div>
                    <el-form-item prop="restrictPeople" class="mp0">
                      <el-input
                        v-model="ruleForm1.restrictPeople"
                        class="cen"
                        style="width: 80px;"
                      />
                    </el-form-item>
                    <div class="mar-left5 mar-right15"> 人开课，人数不足提前</div>
                    <el-form-item prop="restrictTime" class="mp0">
                      <el-input
                        v-model="ruleForm1.restrictTime"
                        class="cen"
                        style="width: 80px;"
                      />
                    </el-form-item>
                    <div class="mar-left5">分钟自动取消</div>
                  </div>
                </div>
                <div class="foSi12 titl">预约时间设置</div>
                <div class="hei44 dis disAl item-l item-p mar-bott10">
                  <div class="label">遵从课程</div>
                  <div class="dis disAl">
                    <div class="dis disAl cuPo" @click.stop="curriculumFollowClick1(1)">
                      <div
                        class="dis disAl disJuC bacFFF borRad50"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      >
                        <div
                          v-if="ruleForm1.curriculumFollow === 1"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5">遵从课程预约规则</div>
                    </div>
                    <div class="dis disAl cuPo mar-left30" @click.stop="curriculumFollowClick1(2)">
                      <div
                        class="dis disAl disJuC bacFFF borRad50"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      >
                        <div
                          v-if="ruleForm1.curriculumFollow === 2"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5">单独设置</div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="ruleForm1.curriculumFollow === 2"
                  class="hei44 dis disAl item-l item-p mar-bott10"
                >
                  <div class="label">预约方式</div>
                  <div class="dis disAl">
                    <div class="dis disAl cuPo" @click.stop="ruleForm1.mode = 1">
                      <div
                        class="dis disAl disJuC bacFFF borRad50"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      >
                        <div
                          v-if="ruleForm1.mode === 1"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5">不支持会员自主预约</div>
                    </div>
                    <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.mode = 2">
                      <div
                        class="dis disAl disJuC bacFFF borRad50"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      >
                        <div
                          v-if="ruleForm1.mode === 2"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5">单自主预约，不限制预约时间 </div>
                    </div>
                    <div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.mode = 3">
                      <div
                        class="dis disAl disJuC bacFFF borRad50"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                      >
                        <div
                          v-if="ruleForm1.mode === 3"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5">自主预约，限制预约时间</div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="ruleForm1.curriculumFollow === 2 && ruleForm1.mode === 3"
                  class="dis item-l mar-bott10"
                  style="padding: 5px 15px;"
                >
                  <div class="label">预约时间</div>
                  <div>
                    <div class="dis disAl mar-bott10">
                      <div
                        class="dis disAl disJuC bacFFF borRad50 cuPo"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                        @click.stop="ruleForm1.time = 1"
                      >
                        <div
                          v-if="ruleForm1.time === 1"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5 mar-right15">提前</div>
                      <el-form-item prop="fenTime" class="mp0">
                        <el-input
                          v-model="ruleForm1.astrict1"
                          class="cen"
                          style="width: 80px;"
                          placeholder="不限制"
                        />
                      </el-form-item>
                      <div class="mar-left10 mar-right5">天，</div>
                      <el-select v-model="ruleForm1.startShi" class="sel" style="width: 60px;">
                        <el-option
                          v-for="(item,index) in shiList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="mar-left5 mar-right5">:</div>
                      <el-select v-model="ruleForm1.startFen" class="sel" style="width: 60px;">
                        <el-option
                          v-for="(item,index) in fenList1"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="mar-left10 mar-right10">至</div>
                      <el-select v-model="ruleForm1.endShi" class="sel" style="width: 60px;">
                        <el-option
                          v-for="(item,index) in shiList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="mar-left5 mar-right5">:</div>
                      <el-select v-model="ruleForm1.endFen" class="sel" style="width: 60px;">
                        <el-option
                          v-for="(item,index) in fenList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="mar-left5">接受自主预约</div>
                    </div>
                    <div class="dis disAl mar-bott10">
                      <div
                        class="dis disAl disJuC bacFFF borRad50 cuPo"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                        @click.stop="ruleForm1.time = 2"
                      >
                        <div
                          v-if="ruleForm1.time === 2"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5 mar-right15">提前</div>
                      <el-form-item prop="astrict2" class="mp0">
                        <el-input
                          v-model="ruleForm1.astrict2"
                          class="cen"
                          style="width: 80px;"
                          placeholder="不限制"
                        />
                      </el-form-item>
                      <div class="mar-left10 mar-right5">天，</div>
                      <el-select v-model="ruleForm1.startShi1" class="sel" style="width: 60px;">
                        <el-option
                          v-for="(item,index) in shiList"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="mar-left5 mar-right5">:</div>
                      <el-select v-model="ruleForm1.startFen1" class="sel" style="width: 60px;">
                        <el-option
                          v-for="(item,index) in fenList1"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                      <div class="mar-left5">接受自主预约</div>
                    </div>
                    <div class="dis disAl">
                      <div
                        class="dis disAl disJuC bacFFF borRad50 cuPo"
                        style="width: 14px;height: 14px;border: 1px solid #6b7cdd;"
                        @click.stop="ruleForm1.time = 3"
                      >
                        <div
                          v-if="ruleForm1.time === 3"
                          class="borRad50"
                          style="width: 6px;height: 6px;background: #6b7cdd;"
                        />
                      </div>
                      <div class="mar-left5 mar-right15">开课前</div>
                      <el-form-item prop="fenTime1" class="mp0">
                        <el-input
                          v-model="ruleForm1.fenTime1"
                          class="cen"
                          style="width: 80px;"
                          placeholder="0"
                        />
                      </el-form-item>
                      <div class="mar-left5">分钟接受自主预约</div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="ruleForm1.curriculumFollow === 2 && ruleForm1.mode >= 2"
                  class="dis disAl hei44 item-l item-p mar-bott30"
                >
                  <div class="label">预约截止时间</div>
                  <div class="dis disAl">
                    <div class="mar-right15">课程预约人数未满，会员需早于开课前</div>
                    <el-form-item prop="fenTime2" class="mp0">
                      <el-input
                        v-model="ruleForm1.fenTime2"
                        class="cen"
                        style="width: 80px;"
                        placeholder="0"
                      />
                    </el-form-item>
                    <div class="mar-left5">分钟接受自主预约</div>
                  </div>
                </div>
                <!-- <div class="foSi12 titl mar-top10">更新信息</div>
								<div class="wid100 item-l item-p hei44 mar-bott10 dis disAl">
									<div class="dis disAl cuPo" @click.stop="ruleForm1.update = 1">
										<div class="dis disAl disJuC bacFFF borRad50"
											style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">
											<div v-if="ruleForm1.update === 1" class="borRad50"
												style="width: 6px;height: 6px;background: #6b7cdd;"></div>
										</div>
										<div class="mar-left5">仅更新本次课程</div>
									</div>
									<div class="dis disAl cuPo mar-left30" @click.stop="ruleForm1.update = 2">
										<div class="dis disAl disJuC bacFFF borRad50"
											style="width: 14px;height: 14px;border: 1px solid #6b7cdd;">
											<div v-if="ruleForm1.update === 2" class="borRad50"
												style="width: 6px;height: 6px;background: #6b7cdd;"></div>
										</div>
										<div class="mar-left5">更新本次及以后每周六的这节课</div>
									</div>
								</div> -->
              </el-form>
            </div>
            <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
              <div
                class="mar-right20 que cuPo"
                style="background: #6b7cdd;"
                @click.stop="submitForm('ruleForm1')"
              >保存</div>
              <div class="que cuPo" style="background: #616b74;" @click.stop="edit = 1">取消</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import htmlToExcel from '@/utils/htmlToExcel'
import html2canvas from 'html2canvas'
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex'
import {
  getCourseshoolList,
  courseshoolAddEdit,
  courseshoolDetails,
  getcourseAll,
  clearCourse,
  copyCourse,
  stopCourse,
  getDdels
} from '@/api/coures'
import {
  getVenue,
  getClassroom
} from '@/api/venue'
export default {
  name: 'CourseSurface',
  components: {
    vueQr
  },
  data() {
    const validateGalleryful = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (!reg.test(value) || !value || value > 10000 || value === 0) {
        callback(new Error('请填写数值(1~10000)'))
      } else {
        callback()
      }
    }
    const validateTime1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.enrollment === 2 && this.ruleForm.restrict === 2) {
        if (!reg.test(value) || !value || value > 1440 || value === 0) {
          callback(new Error('请输入课程时长(1~1440)'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validatePeople = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.enrollment === 2 && this.ruleForm.restrict === 2) {
        if (!reg.test(value) || !value || value > 100 || value === 0) {
          callback(new Error('请填写数值(1~100)'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateTime = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (!reg.test(value) || !value || value > 1440 || value === 0) {
        callback(new Error('请输入课程时长(1~1440)'))
      } else {
        callback()
      }
    }
    const validateAstrict1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.curriculumFollow === 2 && this.ruleForm.time === 1 && this.ruleForm.mode === 3) {
        if (!reg.test(value)) {
          callback(new Error('请输入整数'))
        } else {
          var absVal = Math.abs(value)
          if (Number(value) !== absVal) {
            callback(new Error('请输入整数'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    const validateAstrict2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.curriculumFollow === 2 && this.ruleForm.time === 2 && this.ruleForm.mode === 3) {
        if (!reg.test(value)) {
          callback(new Error('请输入整数'))
        } else {
          var absVal = Math.abs(value)
          if (Number(value) !== absVal) {
            callback(new Error('请输入整数'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    const validateFenTime1 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.curriculumFollow === 2 && this.ruleForm.time === 3 && this.ruleForm.mode === 3) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateFenTime2 = (rule, value, callback) => {
      var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
      if (this.ruleForm.curriculumFollow === 2 && this.ruleForm.mode >= 2) {
        if (!reg.test(value) || (!value && value !== 0) || value < 0) {
          callback(new Error('请输入整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      copyshow: false,
      addVisible: false,
      editVisible: false,
      edit: 1,
      addTime: null,
      list: null,
      timeIndex: 0,
      oneTime: '',
      sevenTime: '',
      todayTime: '',
      timeList: [],
      skin: 0,
      surface: 1,
      surfaceList: [{
        label: '显示全部课程',
        value: 1
      }, {
        label: '仅显示本周课程',
        value: 2
      }],
      check: [1, 2, 3, 4, 5, 6],
      dayList: [{
        label: '本周一',
        value: 1
      }, {
        label: '本周二',
        value: 2
      }, {
        label: '本周三',
        value: 3
      },
      {
        label: '本周四',
        value: 4
      }, {
        label: '本周五',
        value: 5
      }, {
        label: '本周六',
        value: 6
      },
      {
        label: '本周日',
        value: 7
      }, {
        label: '下周一',
        value: 8
      }
      ],
      shiList: [],
      fenList: [],
      fenList1: [],
      day: 1,
      shi: 0,
      fen: 0,
      ruleForm: {
        coursesName: null,
        type: null,
        courses: null,
        coachs: null,
        fee: null,
        galleryful: null,
        kcTime: null,
        classrooms: null,
        jieshuTime: null,
        shiTime: 8,
        fenTime: 0,
        relevance: [],
        color: 'd19fc9',
        difficulty: 3,
        enrollment: 1,
        curriculumFollow: 1,
        mode: 2,
        time: 2,
        astrict1: null,
        startShi: 0,
        startFen: 0,
        endShi: 0,
        endFen: 0,
        astrict2: null,
        startShi1: 0,
        startFen1: 0,
        fenTime1: 0,
        fenTime2: 0,
        restrict: 1,
        restrictPeople: null,
        restrictTime: null
      },
      rules: {
        restrictPeople: [{
          required: true,
          trigger: 'blur',
          validator: validatePeople
        }],
        restrictTime: [{
          required: true,
          trigger: 'blur',
          validator: validateTime1
        }],
        type: [{
          required: true,
          trigger: 'change',
          message: '请选择课程类型'
        }],
        courses: [{
          required: true,
          trigger: 'change',
          message: '请选择课程'
        }],
        coachs: [{
          required: true,
          trigger: 'change',
          message: '请选择课程'
        }],
        galleryful: [{
          required: true,
          trigger: 'blur',
          validator: validateGalleryful
        }],
        kcTime: [{
          required: true,
          trigger: 'blur',
          validator: validateTime
        }],
        astrict1: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict1
        }],
        astrict2: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict2
        }],
        fenTime1: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime1
        }],
        fenTime2: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime2
        }]
      },
      ruleForm1: {
        type: null,
        courses: null,
        coachs: null,
        fee: null,
        galleryful: null,
        kcTime: null,
        classrooms: null,
        shiTime: 8,
        fenTime: 0,
        relevance: [],
        color: 'd19fc9',
        difficulty: 3,
        enrollment: 1,
        curriculumFollow: 1,
        mode: 2,
        time: 2,
        astrict1: null,
        startShi: 0,
        startFen: 0,
        endShi: 0,
        endFen: 0,
        astrict2: null,
        startShi1: 0,
        startFen1: 0,
        fenTime1: 0,
        fenTime2: 0,
        restrict: 1,
        restrictPeople: null,
        restrictTime: null,
        update: 1,
        brief: ''
      },
      rules1: {
        restrictPeople: [{
          required: true,
          trigger: 'blur',
          validator: validatePeople
        }],
        restrictTime: [{
          required: true,
          trigger: 'blur',
          validator: validateTime1
        }],
        type: [{
          required: true,
          trigger: 'change',
          message: '请选择课程类型'
        }],
        courses: [{
          required: true,
          trigger: 'change',
          message: '请选择课程'
        }],
        coachs: [{
          required: true,
          trigger: 'change',
          message: '请选择课程'
        }],
        galleryful: [{
          required: true,
          trigger: 'blur',
          validator: validateGalleryful
        }],
        kcTime: [{
          required: true,
          trigger: 'blur',
          validator: validateTime
        }],
        astrict1: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict1
        }],
        astrict2: [{
          required: true,
          trigger: 'blur',
          validator: validateAstrict2
        }],
        fenTime1: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime1
        }],
        fenTime2: [{
          required: true,
          trigger: 'blur',
          validator: validateFenTime2
        }]
      },
      typeList: [{
        'id': 1,
        'name': '团课'
      },
      {
        'id': 2,
        'name': '精品课'
      }
      ],
      coachsList: [],
      coursesList: [],
      coursesList1: [],
      classroomsList: [],
      colorList: [
        'FBB0A1', 'FEFF99', 'BCFD84', '95E2F5', '928FD9',
        '47D95E', 'E5D0C4', '9c4b4b', 'db6a51', 'f5c856',
        '75c090', 'ed707a', 'b0649a', 'd19fc9', '8b9599',
        '9c8088', 'a6c399', '5b6fc1', '9583b0', 'b0a763',
        'da8e6d', 'b07187', 'F8F6EF', 'EBDBC9', 'DAE1EB',
        'EBF4F7', 'E7DAD1', 'F7F1F1', 'F3D5D7', 'DDCCCD',
        'F4F0E5', 'EDA7A6', 'D0CAB7', 'EDE9E8', 'E6CEB7',
        'F4D7B7', 'F2E8D5', 'FBF0C8', 'ABB5C8', 'DCDCDC',
        'FBECE6', 'C4C6B8', 'EADDE3', 'ECF0EF'
      ],
      isPopover: false,
      isPopover1: false,
      imageUrl: '',
      editName: '',
      editDay: '',
      editData: null
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '团课课程表',
      url: '/course/courseSurface',
      pd: true
    }, {
      name: '班课课程表',
      url: '/course/courseSurfaceClass',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    var check = localStorage.getItem('check')
    if (check) {
      var list = check.split(',')
      this.check = list.map(Number)
    }
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.timeCreated()
    for (var i = 0; i < 24; i++) {
      this.shiList.push({
        label: i < 10 ? '0' + i : i,
        value: i
      })
    }
    for (var i = 0; i < 60; i++) {
      this.fenList.push({
        label: i < 10 ? '0' + i : i,
        value: i
      })
    }
    for (var i = 0; i < 60; i += 5) {
      this.fenList1.push({
        label: i < 10 ? '0' + i : i,
        value: i
      })
    }
    this.getVen()
    this.classroom()
  },
  methods: {
    creatQrCode(aid) {
      new QRCode(this.$refs.qrCodeUrl, {
        text: 'https://www.jianyigongxiang.com/h5/' + aid + '.html#/pages/course/tableCourse', // 转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    juDgeTrue(name) {
      return judgeButton(name, this.roles)
    },
    gouTime(time) {
      var date = new Date()
      var date1 = new Date(time * 1000)
      return date > date1
    },
    tfCourse(type) {
      if (type === 2) {
        this.$confirm('停课后会员/员工均无法预约该课程，课时费不再计入，确定停课？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.getStopCourse(type)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消停课'
          })
        })
      } else {
        this.getStopCourse(type)
      }
    },
    getStopCourse(type) {
      stopCourse({
        'id': this.editData.id,
        'status': type
      }).then(response => {
        const {
          data
        } = response
        this.addVisible = false
        this.editVisible = false
        this.getList()
      }).catch(error => {
        console.log(error)
      })
    },
    clear() {
      this.$confirm('清空当前课表', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        clearCourse({
          'startday': this.oneTime.time,
          'endday': this.sevenTime.time
        }).then(response => {
          const {
            data
          } = response

          this.$message({
            type: 'success',
            message: '清空成功!'
          })
          this.getList()
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消清空'
        })
      })
    },
    copy() {
      // this.$message.error('加急开发中')
      if (this.copyshow) {
        this.copyshow = false
      } else {
        this.copyshow = true
      }
    },
    copycen(val) {
      console.log(val)
      var date = {
        'startday': this.oneTime.time,
        'endday': this.sevenTime.time
      }
      if (val === 'xz') { // 下周
        date['type'] = 'xz'
      } else if (val === 'dy') { // 当月
        date['type'] = 'dy'
      } else { // 下月
        date['type'] = 'xy'
      }
      copyCourse(date).then(response => {
        const {
          data
        } = response
        this.$message.success('成功')
        this.getList()
      }).catch(error => {
        console.log(error)
      })
    },
    dataURLToBlob(dataurl) {
      // ie 图片转格式
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {
        type: mime
      })
    },
    saveImg(name) {
      // this.$message.error('加急开发中')
      const canvasID = document.querySelector('#surface')
      const a = document.createElement('a')
      html2canvas(canvasID, { backgroundColor: '#ffffff',
        allowTaint: true, // 开启跨域
        useCORS: true,
        scrollY: 0,
        scrollX: 0 }).then(canvas => {
        const dom = document.body.appendChild(canvas)
        dom.style.display = 'none'
        a.style.display = 'none'
        document.body.removeChild(dom)
        const blob = this.dataURLToBlob(dom.toDataURL('image/png'))
        a.setAttribute('href', URL.createObjectURL(blob))
        a.setAttribute('download', name + '.png')
        document.body.appendChild(a)
        a.click()
        URL.revokeObjectURL(blob)
        document.body.removeChild(a)
      })
    },
    saveExcel() {
      // this.$message.error('加急开发中')
      htmlToExcel.getExcel('#surface', '导出的自定义标题')
    },
    classroom() {
      getClassroom().then(response => {
        const {
          data
        } = response
        this.classroomsList = data
      }).catch(error => {
        console.log(error)
      })
    },
    getVen() {
      getVenue().then(response => {
        const {
          data
        } = response
        this.coachsList = data
      }).catch(error => {
        console.log(error)
      })
    },
    coursesChange(e) {
      this.coursesList.forEach(item => {
        if (e === item.id) {
          this.ruleForm.coursesName = item.name
          this.ruleForm.coachs = item.coach_id
          this.ruleForm.fee = item.hour_subsidy === '0.00' ? null : item.hour_subsidy
          this.ruleForm.kcTime = item.long_time
          this.ruleForm.galleryful = item.people_num
          this.ruleForm.color = item.colors
          this.ruleForm.difficulty = item.dif_star
          this.jisuanTime(this.ruleForm.kcTime)
        }
      })
    },
    coursesChange1(e) {
      this.coursesList1.forEach(item => {
        if (e === item.id) {
          this.ruleForm1.coursesName = item.name
          this.ruleForm1.coachs = item.coach_id
          this.ruleForm1.fee = item.hour_subsidy === '0.00' ? null : item.hour_subsidy
          this.ruleForm1.kcTime = item.long_time
          this.ruleForm1.galleryful = item.people_num
          this.ruleForm1.color = item.colors
          this.ruleForm1.difficulty = item.dif_star
        }
      })
    },
    getCourse(e) {
      getcourseAll({
        'type': e // 1团课2精品课3私教课4班课
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.ruleForm.courses = null
        this.coursesList = data
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    getCourse1(e) {
      getcourseAll({
        'type': e // 1团课2精品课3私教课4班课
      }).then(response => {
        const {
          data
        } = response
        this.coursesList1 = data
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    handleTag() {
      const parseDom = this.parseDom(`<img src="${this.imageUrl}">`)
      // 在光标处插入dom
      this.range.insertNode(parseDom)
      // 光标开始和光标结束重叠
      this.range.collapse(true)
    },
    // 记录光标位置等 （debounce防抖提升性能）
    handleSelection(e) {
      this.selection = getSelection()
      // 光标对象
      this.range = this.selection.getRangeAt(0)
      // 获取光标对象的范围界定对象
      this.textNode = this.range.startContainer
      // 获取光标位置
      this.rangeStartOffset = this.range.startOffset
      this.ruleForm1.brief = e.target.innerHTML
      console.log(e.target.innerHTML)
    },
    // 转dom对象
    parseDom(arg) {
      var objE = document.createElement('div')
      objE.innerHTML = arg
      return objE.childNodes[0]
    },
    handleAvatarSuccess1(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.handleTag()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    curriculumFollowClick1(index) {
      if (index !== this.ruleForm1.curriculumFollow) {
        this.ruleForm1.curriculumFollow = index
        if (index === 1) {
          this.ruleForm1.mode = 2
          this.ruleForm1.time = 2
          this.ruleForm1.astrict1 = null
          this.ruleForm1.startShi = 0
          this.ruleForm1.startFen = 0
          this.ruleForm1.endShi = 0
          this.ruleForm1.endFen = 0
          this.ruleForm1.astrict2 = null
          this.ruleForm1.startShi1 = 0
          this.ruleForm1.startFen1 = 0
          this.ruleForm1.fenTime1 = 0
          this.ruleForm1.fenTime2 = 0
        }
      }
    },
    curriculumFollowClick(index) {
      if (index !== this.ruleForm.curriculumFollow) {
        this.ruleForm.curriculumFollow = index
        if (index === 1) {
          this.ruleForm.mode = 2
          this.ruleForm.time = 2
          this.ruleForm.astrict1 = null
          this.ruleForm.startShi = 0
          this.ruleForm.startFen = 0
          this.ruleForm.endShi = 0
          this.ruleForm.endFen = 0
          this.ruleForm.astrict2 = null
          this.ruleForm.startShi1 = 0
          this.ruleForm.startFen1 = 0
          this.ruleForm.fenTime1 = 0
          this.ruleForm.fenTime2 = 0
        }
      }
    },
    jisuanTime(time) {
      if (isNaN(time) || time <= 0) {
        this.ruleForm.jieshuTime = null
        this.ruleForm.kcTime = null
      } else {
        console.log(time)
        console.log(time / 60, time % 60)
        var shi = time / 60 + this.ruleForm.shiTime
        var fen = time % 60 + this.ruleForm.fenTime
        // console.log(shi, fen)
        if (fen >= 60) {
          shi += fen / 60
          fen = fen % 60
        }
        if (shi >= 24) {
          shi -= 24
        }
        console.log(shi, fen)
        this.ruleForm.jieshuTime = Math.trunc(shi) + '点' + fen + '分'
        console.log(this.ruleForm.jieshuTime)
      }
    },
    shiCheange() {
      if (this.ruleForm.kcTime) {
        this.jisuanTime(this.ruleForm.kcTime)
      }
    },
    tiaozhuan(url) {
      this.$router.push({
        path: url
      })
    },
    submitForm(formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          var popem = null
          var pd = false
          this.classroomsList.forEach(item => {
            if (item.id === this.ruleForm.classrooms && this.ruleForm.galleryful > item.people_num) {
              pd = true
            }
          })
          if (pd) {
            return this.$message.error('容纳人数不得大于所选教室人数')
          }
          if (formName === 'ruleForm1') {
            var contact_classroom = this.ruleForm1.relevance.join(',')
            popem = {
              'course_id': this.ruleForm1.courses,
              'name': this.ruleForm1.coursesName,
              'type': this.ruleForm1.type,
              'people_num': this.ruleForm1.galleryful,
              'long_time': this.ruleForm1.kcTime,
              'coach_id': this.ruleForm1.coachs,
              'colors': this.ruleForm1.color,
              'dif_star': this.ruleForm1.difficulty,
              'classroom_id': this.ruleForm1.classrooms,
              'contact_classroom': contact_classroom,
              'people_setting': this.ruleForm1.enrollment,
              'people_restrict': this.ruleForm1.restrict,
              'starts_people': this.ruleForm1.restrictPeople,
              'before_cancel': this.ruleForm1.restrictTime,
              'times_setting': this.ruleForm1.curriculumFollow,
              'reservation_method': this.ruleForm1.mode,
              'reservation_deadline': this.ruleForm1.fenTime2,
              'lead_time': this.ruleForm1.time,
              'front_day': this.ruleForm1.time === 1 ? this.ruleForm1.astrict1 : this
                .ruleForm1
                .astrict2,
              'hour': this.ruleForm1.time === 1 ? this.ruleForm1.startShi : this.ruleForm1
                .startShi1,
              'min': this.ruleForm1.time === 1 ? this.ruleForm1.startFen : this.ruleForm1
                .startFen1,
              'hour2': this.ruleForm1.endShi,
              'min2': this.ruleForm1.endFen,
              'last_min': this.ruleForm1.fenTime1,
              'class_date': this.editName.dateName,
              'class_hour': this.ruleForm1.shiTime,
              'class_min': this.ruleForm1.fenTime,
              'id': this.editData.id
              // 'brief': this.ruleForm1.brief
            }
          } else {
            var contact_classroom = this.ruleForm.relevance.join(',')
            popem = {
              'course_id': this.ruleForm.courses,
              'name': this.ruleForm.coursesName,
              'type': this.ruleForm.type,
              'people_num': this.ruleForm.galleryful,
              'long_time': this.ruleForm.kcTime,
              'coach_id': this.ruleForm.coachs,
              'colors': this.ruleForm.color,
              'dif_star': this.ruleForm.difficulty,
              'classroom_id': this.ruleForm.classrooms,
              'contact_classroom': contact_classroom,
              'people_setting': this.ruleForm.enrollment,
              'people_restrict': this.ruleForm.restrict,
              'starts_people': this.ruleForm.restrictPeople,
              'before_cancel': this.ruleForm.restrictTime,
              'times_setting': this.ruleForm.curriculumFollow,
              'reservation_method': this.ruleForm.mode,
              'reservation_deadline': this.ruleForm.fenTime2,
              'lead_time': this.ruleForm.time,
              'front_day': this.ruleForm.time === 1 ? this.ruleForm.astrict1 : this.ruleForm
                .astrict2,
              'hour': this.ruleForm.time === 1 ? this.ruleForm.startShi : this.ruleForm
                .startShi1,
              'min': this.ruleForm.time === 1 ? this.ruleForm.startFen : this.ruleForm
                .startFen1,
              'hour2': this.ruleForm.endShi,
              'min2': this.ruleForm.endFen,
              'last_min': this.ruleForm.fenTime1,
              'class_date': this.addTime.dateName,
              'class_hour': this.ruleForm.shiTime,
              'class_min': this.ruleForm.fenTime
            }
          }
          courseshoolAddEdit(popem).then(response => {
            this.addVisible = false
            this.editVisible = false
            this.getList()
          }).catch(error => {
            console.log(error)
          })
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    },
    shuaVisibleClick() {
      this.addVisible = false
    },
    surfaceAdd(item) {
      this.addTime = item
      this.addVisible = true
    },
    timeChange(e) {
      if (e === 1) {
        this.timeIndex -= 1
      } else if (e === 0) {
        this.timeIndex = 0
      } else {
        this.timeIndex += 1
      }
      this.timeCreated()
    },
    timeCreated() {
      var date = new Date()
      var day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      this.todayTime = date.setHours(0, 0, 0, 0)
      // 本周一的日期
      date.setDate(date.getDate() + this.timeIndex * 7 - date.getDay() + 1)
      this.oneTime = {
        date: date.setHours(0, 0, 0, 0),
        time: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
          .getDate() : '0' + date.getDate())
      }
      this.timeList = [{
        name: day[date.getDay()],
        date: this.oneTime.date,
        dateName: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
          .getDate() : '0' + date.getDate()),
        time: (date.getMonth() + 1) + '.' + (date.getDate() >= 10 ? date.getDate() : '0' + date
          .getDate())
      }]
      for (var i = 1; i <= 6; i++) {
        // 本周日的日期
        date.setDate(date.getDate() + 1)
        this.timeList.push({
          name: day[date.getDay()],
          date: date.setHours(0, 0, 0, 0),
          dateName: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10
            ? date
              .getDate() : '0' + date.getDate()),
          time: (date.getMonth() + 1) + '.' + (date.getDate() >= 10 ? date.getDate() : '0' + date
            .getDate())
        })
        if (i === 6) {
          this.sevenTime = {
            date: date.setHours(0, 0, 0, 0),
            time: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() >= 10 ? date
              .getDate() : '0' + date.getDate())
          }
        }
      }
      console.log(this.todayTime)
      console.log(this.timeList)
      this.getList()
    },
    checkChange(e) {
      console.log(this.check)
      localStorage.setItem('check', this.check)
      this.getList()
    },
    skinClick(index) {
      if (this.skin !== index) {
        this.skin = index
        this.getList()
      }
    },
    editClick(item, index) {
      courseshoolDetails({
        'id': item.id
      }).then(response => {
        const {
          data
        } = response
        var day = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        this.editName = this.timeList[index]
        this.editData = data
        this.editDay = day[index]
        this.edit = 1
        this.editVisible = true
        this.getCourse1(data.type)
        this.ruleForm1 = {
          type: data.type,
          courses: data.course_id,
          coachs: data.coach_id,
          fee: data.hour_subsidy,
          galleryful: data.people_num,
          kcTime: data.long_time,
          classrooms: data.classroom_id,
          shiTime: data.class_hour,
          fenTime: data.class_min,
          relevance: data.contact_classroom.split(',').map(Number),
          color: data.colors,
          difficulty: data.dif_star,
          enrollment: data.people_setting,
          curriculumFollow: data.times_setting,
          mode: data.reservation_method,
          time: data.lead_time,
          astrict1: data.lead_time === 1 ? data.front_day : 0,
          startShi: data.lead_time === 1 ? data.hour : 0,
          startFen: data.lead_time === 1 ? data.min : 0,
          endShi: data.lead_time === 1 ? data.hour2 : 0,
          endFen: data.lead_time === 1 ? data.min2 : 0,
          astrict2: data.lead_time === 2 ? data.front_day : 0,
          startShi1: data.lead_time === 2 ? data.hour : 0,
          startFen1: data.lead_time === 2 ? data.hour : 0,
          fenTime1: data.last_min,
          fenTime2: data.reservation_deadline,
          restrict: Number(data.people_restrict),
          restrictPeople: data.starts_people,
          restrictTime: data.before_cancel,
          update: 1,
          brief: data.brief
        }
        if (this.ruleForm1.brief) {
          setTimeout(() => {
            var divID1 = document.getElementById('richId1')
            divID1.innerHTML = this.ruleForm1.brief
          }, 30)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    getDdel() {
      this.$confirm('确定删除吗？此操作不可恢复。若课程有预约，删除后会自动取消所有预约，记得及时通知会员。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        getDdels({
          'id': this.editData.id
        }).then(response => {
          const {
            data
          } = response
          this.addVisible = false
          this.editVisible = false
          this.getList()
        }).catch(error => {
          console.log(error)
        })
      })
    },
    editTwo() {
      this.edit = 2
      if (this.ruleForm1.brief) {
        setTimeout(() => {
          // 方法区
          var divID = document.getElementById('richId')
          divID.innerHTML = this.ruleForm1.brief
        }, 30)
      }
    },
    getList() {
      getCourseshoolList({
        'startday': this.oneTime.time,
        'endday': this.sevenTime.time
      }).then(response => {
        const {
          data
        } = response
        this.list = data
        this.aid = response.aid
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style>
	.monitor-yt-popover1 {
		padding: 0;
		border-color: #84878d;
	}

	.monitor-yt-popover1 .popper__arrow::after {
		border-bottom-color: #84878d !important;
	}

	.bot {
		padding: 0;
		margin-top: 2px !important;
	}

	.bot .popper__arrow {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.change-skin {
		width: 72px;
		height: 29px;
		background: url('https://www.jianyigongxiang.com/public/membercard/skin-change.png') no-repeat left bottom;
		overflow: hidden;
		cursor: pointer;
	}

	.change-skin span {
		float: left;
		width: 36px;
		height: 29px;
	}

	.change-skin.curr {
		background-position: left top;
	}

	.group1 ::v-deep .el-checkbox {
		margin-right: 10px;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__label {
		color: #000 !important;
	}

	.xuanze {
		-moz-user-select: none;
		/*火狐*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	.syllabus-content-data {
		table-layout: fixed;
	}

	.syllabus-content-data th {
		height: 53px;
		border: 1px solid #d9d9d9;
		font-weight: 400;
	}

	.syllabus-content-data td {
		border: 1px solid #d9d9d9;
		vertical-align: top;
	}

	.syllabus-content-data2 th,
	.syllabus-content-data2 td {
		border: 1px solid #494949;
	}

	.syllabus-content-data .empty-cell {
		color: #4f4f4f;
	}

	.syllabus-thead-cell {
		position: relative;
		padding: 6px 12px;
		text-align: left;
	}

	.syllabus-thead-cell .course-add {
		position: absolute;
		right: 0;
		top: 0;
		width: 26px;
		height: 26px;
	}

	td,
	th {
		padding: 0;
	}

	.syllabus-content-data .time-group-text-box {
		vertical-align: middle;
	}

	.syllabus-list-course {
		overflow: hidden;
	}

	.active {
		position: relative;
		min-height: 105px;
		padding: 6px 12px;
		line-height: 1.5;
		cursor: pointer;
	}

	.syllabus-list-course .course-color {
		position: absolute;
		width: 14px;
		height: 25px;
		right: 10px;
		top: 0;
	}

	.syllabus-list-course .course-color .arrow {
		position: absolute;
		width: 0;
		height: 0;
		left: 0;
		bottom: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 6px solid #fff;
	}

	.quality-badge {
		position: absolute;
		right: 30px;
		top: 0;
		width: 19px;
		height: 25px;
		background: url('../../icons/png/quality.png') no-repeat center center;
	}

	.stop-ribbon {
		text-align: center;
		width: 100px;
		height: 30px;
		line-height: 30px;
		position: absolute;
		top: 7px;
		left: -28px;
		z-index: 1;
		color: #fff;
		overflow: hidden;
		background: rgba(0, 0, 0, .4);
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.sel ::v-deep .el-input--medium .el-input__inner {
		padding: 0 20px 0 10px;
	}

	.item-l {
		background: #f2f2f2;
	}

	.item-p {
		padding: 0 15px;
	}

	.item-w {
		width: 433px;
	}

	.item-bor {
		border-right: 2px solid #fff;
	}

	.dialog-tips {
		height: 32px;
		line-height: 32px;
		background: #fff 8;
		padding: 0 15px;
		margin-top: 30px;
		margin-bottom: 10px;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}

	.col {
		width: 36px;
		height: 36px;
		margin: 0 4px 3px 0;
	}

	.titl {
		height: 22px;
		color: #787878;
	}

	.label {
		width: 200px;
	}

	.cen ::v-deep .el-input__inner {
		text-align: center;
	}

	::v-deep .el-input--medium .el-input__inner {
		height: 34px;
		line-height: 34px;
	}

	.syllabus-introduce {
		background-color: #f6f6f6;
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 8px;
		max-height: 300px;
		overflow-y: scroll;
	}

	.class-desc {
		width: 785px;
		height: 230px;
		border: 1px solid #d9d9d9;
		padding: 5px;
		line-height: 1.5;
	}

	.rich-insert {
		width: 100%;
		height: 30px;
		padding: 2px 5px;
		position: relative;
		vertical-align: text-top;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.rich-row {
		width: 100%;
		height: calc(100% - 31px);
		border: 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 5px;
		margin-top: 1px;
		outline: 0;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	::v-deep .el-upload:focus {
		color: #000 !important;
	}

	::v-deep .el-upload-list {
		display: none;
	}

	.del-list {
		height: 32px;
		line-height: 32px;
		padding: 0 10px;
		cursor: pointer;
	}

	.del-list:hover {
		background: #6b7cdd;
		color: #fff;
	}

	.copy-item:hover {
		background: #6b7cdd;
		color: #ffffff;
	}
	.webkitLineClamp2 {
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		white-space: pre-line !important;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
  .stop-ribbon {
    width: 100px;
    height: 30px;
    line-height: 30px;
    position: relative;
    top: 7px;
    left: -28px;
    z-index: 1;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    font-size: 14px;
    background: rgba(237, 112, 123, .4);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
</style>
